<template>
<div class="mian" :style="{'overflow': isShowShared ? 'hidden' : ''}" v-show="isShowPage">
    <div class="app-pagemian relative" ref="appPageRef" :style="{'padding-bottom': !myVideoFileUrl&& isShowPage ? '94.5px' : ''}">

        <div class="video_box absolute" style="z-index: 8;">
            <div class="video_video bg blur" v-if="myVideoFileUrl"></div>
        </div>

        <div class="video_box video_icon absolute" v-if="myVideoFileUrl" style="z-index: 9;">
            <img src="@/assets/event_images/event_face/icon-event-video-play.png" width="64">
        </div>
        <!-- 用户初始看到的内容 -->
        <div class="video_box absolute">
            <div class="video_video" v-if="myVideoFileUrl">
                <!-- controls="controls" -->
                <video webkit-playsinline="true" playsinline="true" x5-playsinline="true" :autoplay="isIOS" class="absolute" :src="myVideoFileUrl" ref="myVideoRef">
                    <p>设备不支持</p>
                </video>
            </div>
            
            <img src="@/assets/event_images/event_face/img-event-face-videonone.png" width="325" v-else>
        </div>

        <img src="@/assets/event_images/event_face/img-event-face-videoalpho.png" class="alpho_img" width="100%" v-show="!myVideoFileUrl">

        <img src="@/assets/event_images/event_face/img-event-face-videoalpho2.png" class="alpho_img" width="100%" v-show="myVideoFileUrl">

        <transition name="el-fade-in-center">
            <div class="video_box video_icon absolute" v-if="myVideoFileUrl" @click="playOrPauseVideo()" ref="playIconRef">
                <img src="@/assets/event_images/event_face/icon-event-video-play.png" width="64" v-if="!isPlayMode">
            </div>
        </transition>

        <!-- 用户上传完成自拍照后显示的页面内容 -->
        <transition name="el-fade-in-linear">
            <div v-if="!myVideoFileUrl"> 
                <div class="text-center subtitle absolute">
                    <img src="@/assets/event_images/event_face/img-event-video-submit.png" width="135">
                </div>

                <div class="text-center desc_box absolute font-size--md">
                    <span class="desc_radio" :class="{'active': isAgree}" @click="isAgree = !isAgree"></span>
                    <span @click="isAgree = !isAgree">我已阅读并同意</span>
                    <span @click="isShowRule = true">用户协议</span>
                </div>

                <div class="text-center relative">
                    <img src="@/assets/event_images/event_face/img-event-face-start2.png" width="298.5" height="51" class="my_img_start" @click="openLoginPage()">

                    <!-- 测试 -->
                    <!-- capture="camcorder" -->
                    <input name="videoFileUpload" class="my_file_input absolute" type="file" accept="video/*" ref="fileRef" @change="inputFileChange" v-if="userID" v-show="false">
                </div>

                <!-- <div class="event_rule">
                    <p>活动规则：</p>
                    <p>1. 建议您横向拍摄视频（使用4:3的视频比），效果更佳；</p>
                    <p>2. 视频录制时长在3-10秒，小于或大于规定时长，不会生成视频哦~</p>
                    <p>本活动最终解释权归青岛云裳羽衣物联科技有限公司所有。</p>
                </div> -->
            </div>

            <div v-else onselectstart="return false">
                <template v-if="!sharedId">
                    <div class="text-center"><img src="@/assets/event_images/event_face/btn-event-face-reup.png" width="298.5" height="51" class="my_btn_reload" @click="resetOption()"></div>

                    <div class="text-center"><img src="@/assets/event_images/event_face/btn-event-face-shared.png" width="298.5" height="51" class="my_btn_reload" @click="postMiniProgramMsg()"></div>
                </template>

                <div class="text-center want_to" v-else>
                    <img src="@/assets/event_images/event_face/img-event-face-start3.png" width="309" class="my_img_start" @click="resetOption()">
                </div>
            </div>
        </transition>

    </div>

    <!-- 购物车 -->
    <div class="buy_car_box flex align-center space-between" onselectstart="return false" v-if="!myVideoFileUrl && isShowPage">
        <div class="flex align-center flex-start" @click="openYearPage()">
            <img src="@/assets/event_images/event_face/img-event-face-logo.png" width="45">
            <div class="buy_car_title">
                <h5>购买您的拜年新衣</h5>
                <p>年货大集，一站备齐</p>
            </div>
        </div>
        <div class="buy_car_btn" @click="openYearPage()">一键购年货</div>
    </div>

    <transition name="el-zoom-in-top">
        <div class="absolute modal padding_15" v-if="isShowShared" @click="isShowShared = false">
            <p class="text-right" style="padding-right: 44px"><i class="el-icon-s-promotion" style="font-size:42px"></i></p>
            <br>
            <p>好了，现在招呼你的朋友们</p>
            <p>一起来玩吧</p>
        </div>
    </transition>

    <transition name="el-zoom-in-top">
        <div class="absolute modal padding_15" v-if="isShowRule">
            <div class="modal-header">用户协议</div>
            <div class="modal-body">
                <div style="text-indent: 12px;">《用户协议》（以下简称“本协议”）是您（或称用户，指注册、登录、使用、浏览本服务的个人或组织）与青岛云裳羽衣物联科技
                    有限公司公司及其关联公司（以下简称“云裳”）及其运营合作单位（以下简称合作单位）之间关于云裳网站（www.haier-ioc.com，
                    简称本网站与云裳产品、程序及服务所订立的协议。云裳在此特别提醒用户认真阅读、充分理解本协议中各条款，包括免除或者限制
                    云裳责任的免责条款及对用户的权利限制条款。请您审慎阅读并选择接受或不接受本协议（未成年人应在法定监护人陪同下阅读）。
                    除非您接受本协议所有条款，否则您无权注册、登录或使用本协议所涉相关服务。您的注册、登录、使用等行为将视为对本协议的接
                    受，并同意接受本协议各项条款的约束。您对本协议的接受即自愿接受全部条款的约束，包括接受云裳公司对任一服务条款随时所做
                    的任何修改。本协议可由云裳随时更新，更新后的协议条款一旦公布即代替原来的协议条款，恕不再另行通知，用户可在本网站查阅
                    最新版协议条款。在云裳修改本协议相关条款之后，如果用户不接受修改后的条款，请立即停止使用云裳提供的服务，用户继续使用
                    云裳提供的服务将被视为已接受了修改后的协议。</div>
                <div>
                    <ol>
                        <li>
                            <h5>1. 用户行为要求</h5>
                            <div>您应对您使用“海尔衣联网001号店小程序”及相关服务的行为负责，除非法律允许或者经公司事先书面许可，您使用“海尔衣联网001号店小程序”及相关服务不得具有下列行为：</div>
                            <ul>
                                <li>1.1 使用未经公司授权或许可的任何插件、外挂、系统或第三方工具对“海尔衣联网001号店小程序”及相关服务的正常运行进行干扰、破坏、修改或施加其他影响。</li>
                                <li>1.2 利用或针对“海尔衣联网001号店小程序”及相关服务进行任何危害计算机网络安全的行为，包括但不限于：</li>
                                <li>
                                    <ul>
                                        <li>（1）非法侵入网络、干扰网络正常功能、窃取网络数据等危害网络安全的活动；</li>
                                        <li>（2）提供专门用于从事侵入网络、干扰网络正常功能及防护措施、窃取网络数据等危害网络安全活动的程序、工具；</li>
                                        <li>（3）明知他人从事危害网络安全的活动的，为其提供技术支持、广告推广、支付结算等帮助；</li>
                                        <li>（4）使用未经许可的数据或进入未经许可的服务器/帐号；</li>
                                        <li>（5）未经允许进入公众计算机网络或者他人计算机系统并删除、修改、增加存储信息；</li>
                                        <li>（6）未经许可，企图探查、扫描、测试“海尔衣联网001号店小程序”或网络的弱点或其它实施破坏网络安全的行为；</li>
                                        <li>（7）企图干涉、破坏“海尔衣联网001号店小程序”或网站的正常运行，故意传播恶意程序或病毒以及其他破坏干扰正常网络信息服务的行为；</li>
                                        <li>（8）伪造TCP/IP数据包名称或部分名称；</li>
                                        <li>（9）对“海尔衣联网001号店小程序”及相关服务进行反向工程、反向汇编、编译或者以其他方式尝试发现“海尔衣联网001号店小程序”及相关服务的源代码；</li>
                                        <li>（10）恶意注册“海尔衣联网001号店小程序”帐号，包括但不限于频繁、批量注册帐号；</li>
                                        <li>（11）违反法律法规、本协议、公司的相关规则及侵犯他人合法权益的其他行为。</li>
                                    </ul>
                                </li>
                                <li>1.3 如果公司有理由认为您的行为违反或可能违反上述约定的，公司可独立进行判断并处理，且在任何时候有权在不事先通知的情况下终止向您提供服务，并依法追究相关责任。</li>
                            </ul>
                        </li>
                        <li>
                            <h5>2. 信息内容展示及规范</h5>
                            <ul>
                                <li>2.1 公司致力使发布信息、互动交流、评论成为文明、理性、友善、高质量的意见交流。在推动发布信息、互动交流、评论业务发展的同时，不断加强相应的信息安全管理能力，完善发布信息、互动交流、评论自律，切实履行社会责任，遵守国家法律法规，尊重公民合法权益，尊重社会公序良俗。</li>
                                <li>2.2 您制作、评论、发布、传播的信息应自觉遵守法律法规、社会主义制度、国家利益、公民合法权益、社会公共秩序、道德风尚和信息真实性等“七条底线”要求，否则公司有权立即采取相应处理措施。您同意并承诺不制作、复制、发布、传播下列信息：</li>
                                <li>
                                    <ul>
                                        <li>（1）反对宪法确定的基本原则的；</li>
                                        <li>（2）危害国家安全，泄露国家秘密的；</li>
                                        <li>（3）颠覆国家政权，推翻社会主义制度，煽动分裂国家，破坏国家统一的；</li>
                                        <li>（4）损害国家荣誉和利益的；</li>
                                        <li>（5）宣扬恐怖主义、极端主义的；</li>
                                        <li>（6）宣扬民族仇恨、民族歧视，破坏民族团结的；</li>
                                        <li>（7）煽动地域歧视、地域仇恨的；</li>
                                        <li>（8）破坏国家宗教政策，宣扬邪教和封建迷信的；</li>
                                        <li>（9）编造、散布谣言、虚假信息，扰乱经济秩序和社会秩序、破坏社会稳定的；</li>
                                        <li>（10）散布、传播淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；</li>
                                        <li>（11）危害网络安全、利用网络从事危害国家安全、荣誉和利益的；</li>
                                        <li>（12）侮辱或者诽谤他人，侵害他人合法权益的；</li>
                                        <li>（13）对他人进行暴力恐吓、威胁，实施人肉搜索的；</li>
                                        <li>（14）涉及他人隐私、个人信息或资料的；</li>
                                        <li>（15）散布污言秽语，损害社会公序良俗的；</li>
                                        <li>（16）侵犯他人隐私权、名誉权、肖像权、知识产权等合法权益内容的；</li>
                                        <li>（17）散布商业广告，或类似的商业招揽信息、过度营销信息及垃圾信息；</li>
                                        <li>（18）使用本网站常用语言文字以外的其他语言文字评论的；</li>
                                        <li>（19）与所评论的信息毫无关系的；</li>
                                        <li>（20）所发表的信息毫无意义的，或刻意使用字符组合以逃避技术审核的；</li>
                                        <li>（21）侵害未成年人合法权益或者损害未成年人身心健康的；</li>
                                        <li>（22）未获他人允许，偷拍、偷录他人，侵害他人合法权利的；</li>
                                        <li>
                                            <div>（23）包含恐怖、暴力血腥、高危险性、危害表演者自身或他人身心健康内容的，包括但不限于以下情形:</div>
                                            <ul>
                                                <li>i.任何暴力和/或自残行为内容；</li>
                                                <li>ii.任何威胁生命健康、利用刀具等危险器械表演的危及自身或他人人身及/或财产权利的内容；</li>
                                                <li>iii.怂恿、诱导他人参与可能会造成人身伤害或导致死亡的危险或违法活动的内容；</li>
                                            </ul>
                                        </li>
                                        <li>（24）其他含有违反法律法规、政策及公序良俗、干扰“海尔衣联网001号店小程序”正常运营或侵犯其他用户或第三方合法权益内容的信息。</li>
                                    </ul>
                                </li>
                                <li>2.3 您制作、发布、传播的内容需遵守《网络音视频信息服务管理规定》及相关法律法规规定，不得利用基于深度学习、虚拟现实等的新技术新应用制作、发布、传播虚假新闻信息。</li>
                            </ul>
                        </li>
                        <li>
                            <h5>3. 违约处理</h5>
                            <ul>
                                <li>3.1 针对您违反本协议或其他服务条款的行为，公司有权独立判断并视情况采取预先警示、拒绝发布、立即停止传输信息、删除内容或评论、短期禁止发布内容或评论、限制帐号部分或者全部功能直至终止提供服务、永久关闭帐号等措施，对于因此而造成您无法正常使用帐号及相关服务、无法正常获取您帐号内资产或其他权益等后果，公司不承担任何责任。公司有权公告处理结果，且有权根据实际情况决定是否恢复相关帐号的使用。对涉嫌违反法律法规、涉嫌违法犯罪的行为，公司将保存有关记录，并有权依法向有关主管部门报告、配合有关主管部门调查、向公安机关报案等。对已删除内容公司有权不予恢复。</li>
                                <li>3.2 因您违反本协议或其他服务条款规定，引起第三方投诉或诉讼索赔的，您应当自行处理并承担可能因此产生的全部法律责任。因您的违法或违约等行为导致公司及其关联方、控制公司、继承公司向任何第三方赔偿或遭受国家机关处罚的，您还应足额赔偿公司及其关联方、控制公司、继承公司因此遭受的全部损失。</li>
                                <li>3.3 公司尊重并保护用户及他人的知识产权、名誉权、姓名权、隐私权等合法权益。您保证，在使用“海尔衣联网001号店小程序”及相关服务时上传的文字、图片、视频、音频、链接等不侵犯任何第三方的知识产权、名誉权、姓名权、隐私权等权利及合法权益。否则，公司有权在收到权利方或者相关方通知的情况下移除该涉嫌侵权内容。针对第三方提出的全部权利主张，您应自行处理并承担可能因此产生的全部法律责任；如因您的侵权行为导致公司及其关联方、控制公司、继承公司遭受损失的（包括但不限于经济、商誉等损失），您还应足额赔偿公司及其关联方、控制公司、继承公司遭受的全部损失。</li>
                            </ul>
                        </li>
                    </ol>
                </div>
                <div>本活动最终解释权归青岛云裳羽衣物联科技有限公司所有。</div>
            </div>
            <div class="modal-footer" @click="isShowRule = false">确定</div>
        </div>
    </transition>

    <div class="el-loading-mask is-fullscreen" style="background: transparent;z-index: 2001;" v-if="loading">
        <div class="el-loading-spinner">
            <img src="@/assets/event_images/event_face/loading.gif" width="45">
            <p class="el-loading-text">祝福正在路上...</p>
        </div>
    </div>
</div>
</template>

<script>
import axios from 'axios';
import { SaveNewYearVideo, GetMergeYearFaceResult } from '@/views/event-management/services/index';
export default {
    data() {
        return {
            firstPlay: false,
            isShowPage: false,

            isAgree: false,
            isShowRule: false,

            isIOS: false,
            loading: false,
            userID: null,
            sharedId: null,
            isPlayMode: false,
            myVideoFile: null,
            myVideoFileUrl: '',
            isShowShared: false,
            minDurationTime: 3,
            maxDurationTime: 11,
            fileTypeList: ['MP4', 'AVI', 'MKV', 'MOV', 'FLV', 'TS', 'MPG'],
            baseImgUrl: process.env.VUE_APP_FILE_URL,

            source: null,
            uploadFileUrl: null,
            isUploadFile: false,
            uploadHasErr: false,

            currentSharedId: null,
            posterImg: null
        }
    },
    methods: {
        // 播放或者暂停
        playOrPauseVideo() {
            const that = this;
            if (this.isPlayMode) {
                this.isPlayMode = false;
                this.$refs.myVideoRef.pause();
            } else {
                this.$refs.myVideoRef.play();
                this.firstPlay = false;
                this.isPlayMode = true;
                this.$refs.myVideoRef.addEventListener('ended', function () {
                    that.isPlayMode = false;
                    that.$refs.myVideoRef.currentTime = 0;
                }, false);
            }
        },
        // input事件改动
        inputFileChange(event) {
            const that = this;
            const files = event.target.files;
            if (files && files[0]) {
                const size = (files[0].size / 1024 /1024);
                const name = files[0].name;
                const type = name.split('.')[name.split('.').length - 1].toUpperCase();
                if (!that.fileTypeList.includes(type)) {
                    that.$message.error('格式错误，请上传视频格式文件!');
                    return;
                }

                if (that.isIOS) {
                    if (size > 100) {
                        that.$message.error('视频文件过大，请重新上传!');
                        return;
                    }
                    const fileUrl = URL.createObjectURL(files[0]);
                    that.firstPlay = true;
                    that.myVideoFile = files[0];
                    that.myVideoFileUrl = fileUrl;

                    that.uploadFileToOBS(that.myVideoFile, that.myVideoFile.name);
                    return;
                }

                that.getVideoFileTime(files[0])
                .then(duration => {
                    if (duration < that.minDurationTime) {
                        that.$message.error('视频时间过短，请重新上传!');
                        return;
                    }
                    if (duration > that.maxDurationTime) {
                        that.$message.error('视频时间过长，请重新上传!');
                        return;
                    }
                    const fileUrl = URL.createObjectURL(files[0]);
                    that.firstPlay = true;
                    that.myVideoFile = files[0];
                    that.myVideoFileUrl = fileUrl;

                    setTimeout(() => {
                        that.$refs.playIconRef.click();
                    }, 300);

                    that.uploadFileToOBS(files[0], files[0].name);
                    // 清空文件内容
                    // that.$refs.fileRef.value = '';
                })
            }
        },
        // 获取视频文件的长度
        getVideoFileTime(file) {
            const that = this;
            return new Promise(resolve => {
                //获取视频或者音频时长
                const fileUrl = URL.createObjectURL(file);
                //经测试，发现audio也可获取视频的时长
                const audioElement = new Audio(fileUrl);
                audioElement.addEventListener('loadedmetadata', function(_event) {
                    resolve(audioElement.duration);
                });
            })
        },
        // 跳转小程序登录页面
        openLoginPage() {
            if (!this.userID) {
                this.openMiniProgramPage('/pages/arthorize/index?isYear=2');
                return;
            }
            if (!this.isAgree) {
                this.$message.warning('请先同意用户协议!');
                return;
            }
            this.$refs.fileRef.click();
        },
        // 跳转小程序活动详情页面
        openYearPage() {
            this.openMiniProgramPage('/pages/moredetail/index?isYear=2');
        },
        // 跳转微信小程序的某个页面
        openMiniProgramPage(url) {
            this.checkMiniProgramEnv()
            .then(data => {
                wx.miniProgram.redirectTo({ url });
            })
            .catch(error => {
                this.$message.error('请在小程序环境中打开!');
            })
        },
        // 检测是否是在小程序的环境中
        checkMiniProgramEnv() {
            return new Promise((resolve, reject) => {
                wx.miniProgram.getEnv(res => {
                    if (res.miniprogram) {
                        resolve(true);
                    } else { 
                        reject(false);
                    }
                });
            })
        },
        // 获取拜年视频的链接
        getNewYearVideoUrl(id) {
            GetMergeYearFaceResult({ id: id })
            .then(data => {
                this.isShowPage = true;
                if (data.code == 200) {
                    this.myVideoFileUrl = this.baseImgUrl + '/' + data.data.resultVideo;
                    setTimeout(() => {
                        this.firstPlay = true;
                    }, 300);
                } else {
                    this.$message.error('分享信息获取失败!');
                }
            })
            .catch(error => {
                this.isShowPage = true;
                this.$message.error(error);
            })
        },
        // 上传附件到obs
        uploadFileToOBS(file, name) {
            const that = this;
            that.source = null;
            that.isUploadFile = true;

            var formData = new FormData();
            formData.append('file', file, name);
            formData.append('useDay', 1);
            formData.append('path', 'middleground/bnVideo/zhengshi');
            formData.append('projectId', process.env.VUE_APP_FILE_SERVICE_ID);

            const CancelToken = axios.CancelToken;
            that.source = CancelToken.source();
            axios({
                method: 'post',
                url: '/cloudApi/datacenter/file/uploadFile',
                cancelToken: that.source.token,
                data: formData,
                baseURL: process.env.VUE_APP_BASE_API
            }).then(data => {
                that.isUploadFile = false;
                if (data.status == 200 && data.data.code) {
                    that.uploadHasErr = false;
                    that.uploadFileUrl = data.data.data.fileUrl;
                } else {
                    that.uploadHasErr = true;
                }
            }).catch(error => {
                that.isUploadFile = false;
                that.uploadHasErr = true;
                // that.$message.error(error);
            });
        },
        watchUploadResult() {
            const that = this;
            return new Promise((resolve, reject) => {
                const timer = setInterval(() => {
                    if (!that.isUploadFile) {
                        if (that.uploadHasErr) {
                            reject('视频上传失败!');
                            return;
                        }
                        if (that.uploadFileUrl) {
                            clearInterval(timer);
                            resolve(that.uploadFileUrl);
                            return;
                        }
                    }
                }, 100);
            })
        },
        // 向微信小程序发送消息
        async postMiniProgramMsg() {
            this.loading = true;
            if (this.currentSharedId) {
                this.loading = false;
                wx.miniProgram.postMessage({
                    data: {
                        sharedId: this.currentSharedId
                    }
                })
                this.isShowShared = true;
                return;
            }

            this.watchUploadResult()
            .then(file => {
                SaveNewYearVideo({
                    userId: this.userID,
                    resultVideo: file,
                    userType: 3,
                    userChannel: 1
                })
                .then(res => {
                    this.loading = false;
                    if (res.code == 200) {
                        this.currentSharedId = res.data.id;
                        wx.miniProgram.postMessage({
                            // data: {
                            //     title: '分享的标题',
                            //     desc:'分享的描述',
                            //     path: '/pages/share/share.js'
                            // }
                            data: {
                                sharedId: res.data.id
                            }
                        })
                        this.isShowShared = true;
                    } else {
                        this.$message.error('视频上传出错，请重试!');
                    }
                })
                .catch(error2 => {
                    this.loading = false;
                    this.$message.error(error2);
                })
            })
            .catch(error => {
                this.loading = false;
                if (!axios.isCancel('cancel')) {
                    this.$message.error(error);
                }
            })
        },
        // 创建script标签，引入微信sdk
        importWxSdk() {
            const scriptTag = document.createElement('script');
            scriptTag.src = process.env.VUE_APP_WXSDK_BASEURL;
            scriptTag.type = 'text/javascript';
            document.getElementsByTagName('head')[0].append(scriptTag);
        },
        // 检测是否已经引入微信sdk文件
        checkIsImportWxSdk() {
            if (window.wx || window.jWeixin) {
                return true;
            } else {
                return false;
            }
        },
        // 屏幕适配自动修改
        fitScreenAuto() {
            const screenWidth = window.innerWidth || window.screen.width;
            if (screenWidth != 375) {
                const scaleNum = screenWidth / 375;
                this.$refs.appPageRef.style.transform = `scale(${scaleNum})`;
                this.$refs.appPageRef.style.transformOrigin = 'top left';
            }
        },
        resetOption() {
            if (this.source) {
                if (this.isUploadFile) {
                    this.source.cancel('cancel');
                }
                if (this.isUploadFile) {
                    this.isUploadFile = false;
                }
            }
            this.uploadFileUrl = null;
            this.uploadHasErr = false;
            this.sharedId = null;
            this.isPlayMode = false;
            this.firstPlay = false;
            this.myVideoFile = null;
            this.myVideoFileUrl = '';
            this.currentSharedId = null;
        }
    },
    created() {
        if (this.$route.query.userId && this.$route.query.userId != 'undefined') {
            this.userID = this.$route.query.userId;
        }
        if (this.$route.query.sharedId && this.$route.query.sharedId != 'undefined') {
            this.sharedId = this.$route.query.sharedId;
            this.getNewYearVideoUrl(this.sharedId);
        } else {
            this.isShowPage = true;
        }
        this.importWxSdk();
        // 判断机型
        var u = navigator.userAgent;
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
        if (isiOS) {
            this.isIOS = true;
        } else if (isAndroid) {
            this.isIOS = false;
        }
    },
    mounted() {
        this.fitScreenAuto();
    }
}
</script>

<style lang="scss" scoped>
* {
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

h5, p {
    margin: 0;
}

ol, ul {
    padding-left: 12px;
    list-style: none;

    li > ul > li > ul {
        padding-left: 0;

        li > ul {
            padding-left: 12px;
        }
    }
}

.mian {
    width: 100%;
    height: 100%;
    color: white;
    background: #861015;
    overflow-x: hidden;
}

.app-pagemian {
    width: 375px;
    padding-top: 550px;
    background: #861015 url('../../../assets/event_images/event_face/bg-event-face-video.png') no-repeat top left;
    background-size: contain;

    .my_img_start {
        margin-bottom: 28.5px;
    }

    .my_file_input {
        width: 298.5px;
        height: 51px;
        opacity: 0;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 9;
        display: inline-block;
        outline: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    .my_img_line{
        margin-bottom: 10.5px;
    }

    // .event_rule {
    //     width: 345px;
    //     border-radius: 10px;
    //     padding: 10px 15px;
    //     border: 2px solid #feb9b7;
    //     margin: 0 auto;

    //     p {
    //         font-size: 12px;
    //         text-align: left;
    //         color: #feb9b7;
    //         line-height: 25px;
    //         letter-spacing: -1px;
    //     }
    // }
}

.buy_car_box {
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 95%;
    height: 65px;
    padding: 10px;
    opacity: 0.9;
    background: #ffcccc;
    border-radius: 10px;
    z-index: 11;

    .buy_car_title {
        padding-left: 10px;

        h5 {
            color: #333333;
            font-size: 16px;
            line-height: 23px;
            margin-bottom: 2px;
        }

        p {
            color: #666666;
            font-size: 12px;
            line-height: 23px;
        }
    }

    .buy_car_btn {
        height: 36px;
        font-size: 13px;
        background: #c03e3e;
        border-radius: 18px;
        line-height: 36px;
        padding: 0 7px;
    }
}

.modal {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    text-align: center;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 1100;

    .modal-header {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        background-color: white;
        padding: 15px;
        color: initial;
        font-weight: bold;
        border-bottom: 1px solid #eeeeee;
    }
    .modal-body {
        background-color: white;
        text-align: left;
        padding: 15px;
        color: initial;
        max-height: 64vh;
        min-height: 420px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .modal-footer {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        background-color: white;
        padding: 15px;
        color: initial;
        border-top: 1px solid #eeeeee;
    }
}

.el-loading-spinner {
    width: 104px;
    // height: 110px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.75);

    padding: 11px;
    margin: 0 auto;
    left: 0;
    right: 0;

    .el-loading-text {
        color: white;
        font-size: 12px;
        margin: 0;
        transform: scale(0.9);
        margin-top: 4px;
    }
}

.alpho_img {
    top: 0;
    left: 0;
    position: absolute;
    z-index: 99;
}

.video_box {
    top: 167.5px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 325px;
    height: 248px;
    text-align: center;
    z-index: 10;
    border-radius: 10px;
    overflow: hidden;

    .video_video {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10;

        &.bg {
            background: url('../../../assets/event_images/event_face/img-event-face-videonone.png') no-repeat center;
            background-size: cover;
        }

        &.blur {
            -webkit-filter: blur(3px);
            -moz-filter: blur(3px);
            -ms-filter: blur(3px);    
            filter: blur(3px); 
        }

        i {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 64px;
            z-index: 11;
        }

        video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}

.video_icon {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 101;
}

.my_btn_reload {
    margin-bottom: 18.5px;
}

.desc_box {
    color: #FEB9B7;
    margin-bottom: 20px;
    margin-top: 20px;
    top: 514px;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 199;

    .desc_radio {
        width: 15px;
        height: 15px;
        border: 1px solid #FEB9B7;
        border-radius: 50%;
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;

        &.active {
            position: relative;

            &::after {
                position: absolute;
                top: 2px;
                left: 2px;
                width: 9px;
                height: 9px;
                content: '';
                border-radius: 50%;
                background-color: #FEB9B7;
            }
        }
    }

    span:last-child {
        position: relative;
        margin-left: 0.5em;

        &::after {
            position: absolute;
            left: 0;
            bottom: -4px;
            height: 1px;
            width: 100%;
            content: '';
            background-color: #FEB9B7;
        }
    }
}

.modal-body {
    font-size: 12px;
    line-height: 20px;
}

.subtitle {
    top: 447.5px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.want_to {
    width: 100%;
    height: 187.5px;
    background: url('../../../assets/event_images/event_face/bg-event-face-start3.png') no-repeat top left;
    background-size: contain;
    padding-top: 5px;
}
</style>

